<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JSP</title>
    <link rel="stylesheet" href="../../css/base.css" />
	<link rel="stylesheet" href="../../css/info-mgt.css" />
	<link rel="stylesheet" href="../../css/WdatePicker.css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript" src="../../js/WdatePicker.js"></script>
	<script type="text/javascript" src="../../js/jquery.pagination.js"></script>
  </head>
  
  <body>
    <div class="title"><h2>考勤数据</h2></div>
	<div class="query">
		<div class="query-conditions ue-clear">
	        <div class="conditions name ue-clear" style="width:20%;">
	            <label>部门名称:</label>
	            <div class="select-wrap">
	                <div class="select-title ue-clear"><span id="dept">请选择</span><i class="icon"></i></div>
	                <ul class="select-list" id="liDept">
	                    <!-- 部门li标签 -->
	                </ul>
	            </div>
	        </div>
	        <div class="conditions name ue-clear" style="width:20%;">
	            <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>
	            <div class="select-wrap">
	                <div class="select-title ue-clear">
	                	<!-- 标题text文本框 -->
	                	<input type="text" id="name" style="width:100%; border:0px solid red;" placeholder="请输入姓名" />
	                </div>
	            </div>
	        </div>
	        <div class="conditions name ue-clear" style="width:20%;">
	            <label>数据状态:</label>
	            <div class="select-wrap">
	                <div class="select-title ue-clear"><span id="status">请选择</span><i class="icon"></i></div>
	                <ul class="select-list">
	                    <li>未完成</li>
	                    <li>正常</li>
	                    <li>缺勤</li>
	                </ul>
	            </div>
	        </div>
	        <div class="conditions time ue-clear" style="width:19%;">
	            <label>考勤时间:</label>
	            <div class="time-select">
	            	<input id="startTime" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="开始时间" />
	                <i class="icon"></i>
	            </div>
	            <span class="line">-</span>
	            <div class="time-select">
	            	<input id="endTime" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="结束时间" />
	                <i class="icon"></i>
	            </div>
	        </div>
	    </div>
	    <div class="query-btn ue-clear">
	    	<a href="javascript:;" class="confirm">查询</a>
	        <a href="javascript:;" class="clear">清空条件</a> 
	    </div>
	</div>
	<!-- 数据表格 -->
	<div class="table-box">
		<table>
	    	<thead>
	        	<tr>
	                <th class="name">员工姓名</th>
	                <th class="name">上午上班考勤时间</th>
	                <th class="node">上午下班考勤时间</th>
	                <th class="node">下午上班考勤时间</th>
	                <th class="time">下午下班考勤时间</th>
	                <th class="node">晚上上班考勤时间</th>
	                <th class="time">晚上下班考勤时间</th>
	                <th class="time">考勤日期</th>
	                <th class="time">考勤信息状态</th>
	                <th class="node">所属部门</th>
	            </tr>
	        </thead>
	        <tbody id="checkTimeTbody">
	        	<!-- 考勤数据表格 -->
	        </tbody>
	    </table>
	</div>
	<!-- 分页按钮 ------------------------------------------------->
	<div style="margin:0px auto; width:100%; text-align:center;">
	  	<table id="tableLast" width="80%" align="center" border="0">
	  		<tr align="center">
	  			<td width="75%"></td>
	  			<td><a href="javascript:void(0);" id="headPage">首页</a></td>
	  			<td><a href="javascript:void(0);" id="backPage">上一页</a></td>
	  			<td align="right">当前页面:</td>
	  			<td width="8%" align="left"><input type="text" id="page" value="1" style="width:20%;">
	  				<a href="javascript:void(0);" id="skipPage">跳转</a>&nbsp;&nbsp;
	  				<label id="nowPage">1</label>/<label id="countPage"></label>
	  			</td>
	  			<td><a href="javascript:void(0);" id="nextPage">下一页</a></td>
	  			<td><a href="javascript:void(0);" id="lastPage">末页</a></td>
	  		</tr>
	  	</table>
	  	<br/>
  	</div>
  	
  	<!-- 补考勤数据表格 -->
  	<div class="title"><h2>补考勤数据</h2></div>
	<div class="table-box">
		<table>
	    	<thead>
	        	<tr>
	                <th class="name">员工姓名</th>
	                <th class="name">补考勤原因</th>
	                <th class="node"> 补考勤时间</th>
	                <th class="node">补考勤日期</th>
	                <th class="time">所属部门</th>
	            </tr>
	        </thead>
	        <tbody id="mendCheckTbody">
	        	<!-- 考勤数据表格 -->
	        </tbody>
	    </table>
	</div>
	<!-- 分页按钮 ------------------------------------------------->
	<div style="margin:0px auto; width:100%; text-align:center;">
	  	<table id="tableLast" width="80%" align="center" border="0">
	  		<tr align="center">
	  			<td width="75%"></td>
	  			<td><a href="javascript:void(0);" id="headPage2">首页</a></td>
	  			<td><a href="javascript:void(0);" id="backPage2">上一页</a></td>
	  			<td align="right">当前页面:</td>
	  			<td width="8%" align="left"><input type="text" id="page2" value="1" style="width:20%;">
	  				<a href="javascript:void(0);" id="skipPage2">跳转</a>&nbsp;&nbsp;
	  				<label id="nowPage2">1</label>/<label id="countPage2"></label>
	  			</td>
	  			<td><a href="javascript:void(0);" id="nextPage2">下一页</a></td>
	  			<td><a href="javascript:void(0);" id="lastPage2">末页</a></td>
	  		</tr>
	  	</table>
	  	<br/>
  	</div>
  	
  	<script type="text/javascript">
  		//查询字符串
		var condition="";
		var dept="";
		var status="未完成";
		var other="";
  		$(function(){
  		//异步查询部门信息 加入下拉列表
		$.ajax({
		 type:"POST",
		 url:"planConditionManager.action",
		 data:"method=queryDept",
		 success:function(msg){
		 	var str="";
		 	for(var i=0;i<msg.length;i++){
		 		str+="<li>"+msg[i].deptName+"</li>";
		 	}
		 	$("#liDept").html(str);
		 }
		});
		
		//异步查找考勤数据
		function paging(condition){
			if(isCondition){
				var name=$("#name").val();
				var startTime=$("#startTime").val();
				var endTime=$("#endTime").val();
				if($("#dept").text()!="请选择"){
					dept=$("#dept").text();
				}
				if(name!=""){
					other="&user_name="+name;
				}
				if($("#status").text()!="请选择"){
					status=$("#status").text();
				}
				//拼接时间查询字符串
				if(startTime!=""&&endTime!=""){
					other+="&check_date="+startTime+","+endTime;
				}else if(startTime!=""&&endTime==""){
					other+="&check_date="+startTime+",8888-08-08";
				}else if(startTime==""&&endTime!=""){
					other+="&check_date=1111-11-11,"+endTime;
				}
			}
			$.ajax({
			 type:"POST",
			 url:"accLwg*checkin.paging",
			 data:condition+"&check_dept="+dept+other+"&check_type="+status,
			 success:function(msg){
			 	var str="";
			 	for(var i=0;i<msg.data.length;i++){
			 		str+="<tr><td class='num'>"+msg.data[i].userName+"</td>";
			 		str+="<td class='name'>"+msg.data[i].checkAmStartTime+"</td>";
		            str+="<td class='process'>"+msg.data[i].checkAmEndTime+"</td>";
		            str+="<td class='node'>"+msg.data[i].checkPmStartTime+"</td>";
			 		str+="<td class='time'>"+msg.data[i].checkPmEndTime+"</td>";
			 		str+="<td class='name'>"+msg.data[i].checkNtStartTime+"</td>";
		            str+="<td class='process'>"+msg.data[i].checkNtEndTime+"</td>";
		            str+="<td class='node'>"+msg.data[i].checkDate+"</td>";
			 		str+="<td class='time'>"+msg.data[i].checkType+"</td>";
		            str+="<td class='name'>"+msg.data[i].checkDept+"</td></tr>";
			 	}
			 	if(i<10){
			 		for(;i<10;i++){
			 			str+="<tr><td class='name'> - </td></tr>";
			 		}
			 	}
			 	$("#checkTimeTbody").html(str);
			 	//向上取整总页数
				$("#countPage").text(Math.ceil(msg.rowNum/10));
			 }
			});
		}
		//调用分页
		condition="nowPage=0&turnType=next";
		paging(condition);
		
		
		//首页
		$("#headPage").click(function(){
			if($("#nowPage").text()==1){
			}else{
				data="nowPage=0&turnType=next";
				paging(data);
				$("#nowPage").text(1);
				$("#page").val(1);
			}
		});
		//末页
		$("#lastPage").click(function(){
			if($("#nowPage").text()==$("#countPage").text()){
			}else{
				data="nowPage="+(parseInt($("#countPage").text())-1)+"&turnType=next";
				paging(data);
				$("#nowPage").text($("#countPage").text());
				$("#page").val($("#nowPage").text());
			}
		});
		//上一页
		$("#backPage").click(function(){
			if($("#nowPage").text()==1){
			}else{
				data="nowPage="+$("#nowPage").text()+"&turnType=back";
				paging(data);
				$("#nowPage").text(parseInt($("#nowPage").text())-1);
				$("#page").val($("#nowPage").text());
			}
		});
		//下一页
		$("#nextPage").click(function(){
			if($("#nowPage").text()==$("#countPage").text()){
			}else{
				data="nowPage="+$("#nowPage").text()+"&turnType=next";
				paging(data);
				$("#nowPage").text(parseInt($("#nowPage").text())+1);
				$("#page").val($("#nowPage").text());
			}
		});
		//跳转页面
		$("#skipPage").click(function(){
			if($("#page").val()>$("#countPage").text()||$("#page").val()<1||
			$("#page").val()==$("#nowPage").text()){
			}else{
				data="nowPage="+(parseInt($("#page").val())-1)+"&turnType=next";
				paging(data);
				$("#nowPage").text($("#page").val());
			}
		});
		
		//清空按钮
		$(".clear").click(function(){
			$("#status").text("请选择");
			$("#dept").text("请选择");
			$("#name").val("");
			$("#startTime").val("");
			$("#endTime").val("");
			
			dept="";
			status="未完成";
			other="";
			isCondition=false;
		});
		
		var isCondition=false;//是否使用查询条件
		//查询按钮
		$(".confirm").click(function(){
			//调用分页
			isCondition=true;
			condition="nowPage=0&turnType=next";
			paging(condition);
			paging2(condition);
		});
	/////////////////////////////////////////////////////////////////////////////////
		//异步补考勤数据
		function paging2(condition){
			if(isCondition){
				var name=$("#name").val();
				var startTime=$("#startTime").val();
				var endTime=$("#endTime").val();
				if($("#dept").text()!="请选择"){
					dept=$("#dept").text();
				}
				if(name!=""){
					other="&user_name="+name;
				}
				//拼接时间查询字符串
				if(startTime!=""&&endTime!=""){
					other+="&cause_date="+startTime+","+endTime;
				}else if(startTime!=""&&endTime==""){
					other+="&cause_date="+startTime+",8888-08-08";
				}else if(startTime==""&&endTime!=""){
					other+="&cause_date=1111-11-11,"+endTime;
				}
			}
			$.ajax({
			 type:"POST",
			 url:"accLwg*checkCause.paging",
			 data:condition+"&dept_name="+dept+other,
			 success:function(msg){
			 	var str="";
			 	for(var i=0;i<msg.data.length;i++){
			 		str+="<tr><td class='num'>"+msg.data[i].userName+"</td>";
			 		str+="<td class='name'>"+msg.data[i].causeText+"</td>";
		            str+="<td class='process'>"+msg.data[i].causeTime+"</td>";
			 		str+="<td class='time'>"+msg.data[i].causeDate+"</td>";
		            str+="<td class='name'>"+msg.data[i].deptName+"</td></tr>";
			 	}
			 	if(i<10){
			 		for(;i<10;i++){
			 			str+="<tr><td class='name'> - </td></tr>";
			 		}
			 	}
			 	$("#mendCheckTbody").html(str);
			 	//向上取整总页数
				$("#countPage2").text(Math.ceil(msg.rowNum/10));
			 }
			});
		}
		//调用分页
		condition="nowPage=0&turnType=next";
		paging2(condition);
		
		
		//首页
		$("#headPage2").click(function(){
			if($("#nowPage2").text()==1){
			}else{
				data="nowPage=0&turnType=next";
				paging(data);
				$("#nowPage2").text(1);
				$("#page2").val(1);
			}
		});
		//末页
		$("#lastPage2").click(function(){
			if($("#nowPage2").text()==$("#countPage2").text()){
			}else{
				data="nowPage="+(parseInt($("#countPage2").text())-1)+"&turnType=next";
				paging2(data);
				$("#nowPage2").text($("#countPage2").text());
				$("#page2").val($("#nowPage2").text());
			}
		});
		//上一页
		$("#backPage2").click(function(){
			if($("#nowPage2").text()==1){
			}else{
				data="nowPage="+$("#nowPage2").text()+"&turnType=back";
				paging2(data);
				$("#nowPage2").text(parseInt($("#nowPage2").text())-1);
				$("#page2").val($("#nowPage2").text());
			}
		});
		//下一页
		$("#nextPage2").click(function(){
			if($("#nowPage2").text()==$("#countPage2").text()){
			}else{
				data="nowPage="+$("#nowPage2").text()+"&turnType=next";
				paging2(data);
				$("#nowPage2").text(parseInt($("#nowPage2").text())+1);
				$("#page2").val($("#nowPage2").text());
			}
		});
		//跳转页面
		$("#skipPage2").click(function(){
			if($("#page2").val()>$("#countPage2").text()||$("#page").val()<1||
			$("#page2").val()==$("#nowPage2").text()){
			}else{
				data="nowPage="+(parseInt($("#page2").val())-1)+"&turnType=next";
				paging2(data);
				$("#nowPage2").text($("#page2").val());
			}
		});
		
	});
  	
  	
  		$(function(){
	  		$(".select-title").on("click",function(){
				$(".select-list").hide();
				$(this).siblings($(".select-list")).show();
				return false;
			});
			$(".select-list").on("click","li",function(){
				var txt = $(this).text();
				$(this).parent($(".select-list")).siblings($(".select-title")).find("span").text(txt);
			});
  		});
  		
  		//改变分页按钮字体大小
		$("#tableLast tr td").css("font-size","15px");
		$("#tableLast tr td").css("background","url(../../images/righttitlebig.png)");
		
		$("tbody").find("tr:odd").css("backgroundColor","#eff6fa");
		
		showRemind('input[type=text], textarea','placeholder');
  	</script>
  	
  </body>
</html>
